<template>
  <div class="table">
    <el-table :data="list" :cell-style="{ 'text-align': 'center' }" border>
      <el-table-column align="center" prop="id" label="编号"></el-table-column>
      <el-table-column align="center" prop="title" label="菜单名称"></el-table-column>
      <el-table-column align="center" prop="level" label="菜单级数"></el-table-column>
      <el-table-column align="center" prop="name" label="前端名称"></el-table-column>
      <el-table-column align="center" prop="icon" label="前端图标"></el-table-column>
      <el-table-column align="center" prop="status" label="是否显示">
        <template #default="scope">
          <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0"
            @change="switchfn(scope.row.id)" />
        </template>
      </el-table-column>
      <el-table-column align="center" prop="sort" label="排序"></el-table-column>
      <el-table-column align="center" prop="status" label="设置">
        <template #default="scope">
          <el-button type="primary" link @click="detail(scope.row.id)">查看下级</el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template #default="scope">
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { useTable } from '@/hook/table'
import * as http from "@/request/api"
import router from '@/router';
import { reactive, ref } from 'vue';

// let params = ref<AdminListParams>({ parentId: 0 })

let params = reactive<AdminListParams>({
  parentId: 0
})

let { list, paginate, switchfn, getData, handleSizeChange, handleCurrentChange } = useTable(http.admin.MenuList, params)

async function detail(id: number) {
  params.parentId = id
  await router.push(`/ums/menu?pid=${id}`)
  getData()
}

</script>